<template>
  <div class="app-container" ref="appContainer" :style="{'height': appMain.height +'px'}">
    <div slot="title" class="title-box"
         v-hasRole="['admin']">
      <el-tooltip class="item" effect="dark" content="可通过【页面构建】进行页面调整" placement="left">
        <el-button size="mini" circle icon="el-icon-milk-tea" style="color: #5cb6ff;" @click="pageBuild"/>
      </el-tooltip>
      <el-divider class="divider"/>
      <el-tooltip class="item" effect="dark" content="回到顶部" placement="left">
        <el-button size="mini" circle icon="el-icon-arrow-up" @click="scrollToTop"/>
      </el-tooltip>
    </div>
    <el-form
      ref="form"
      :model="form"
      :size="formConf.size"
      :label-position="formConf.labelPosition"
      :label-width="formConf.labelWidth + 'px'"
    >
      <DraggableItem
        v-for="(element, index) in formBuildConfig"
        :key="element.buildKey+index"
        :name="'my-component-' + element.formId"
        :drawing-list="formBuildConfig"
        :element="element"
        :index="index"
        :form-conf="formConf"
        :formData="form"
      />
    </el-form>

    <el-drawer
      title="配置与开发"
      :withHeader="false"
      :visible.sync="drawerVisible">
      <DesignGuideSet v-if="drawerVisible"
                    :pageConfig="pageConfig"
                    @close="drawerVisible=false"/>
    </el-drawer>
  </div>
</template>

<script>

import {formConf} from "@/views/youshuda/components/FormBuild/generator/config";
import {getFormBuildConfig} from "@/views/youshuda/api/BaseApi";

export default {
  name: 'GenerBuildPage',
  components: {
    //表单配置展示组件
    DraggableItem: () => import('@/views/youshuda/components/FormBuild/generator/DraggableItem'),
    DesignGuideSet: () => import('@/views/youshuda/base/DesignGuide/DesignGuideSet'),
  },
  data() {
    return {
      //抽屉的显示标识
      drawerVisible: false,
      //页面配置信息
      pageConfig:{
        tabGenId: '', //表单设计Key
        buildKey: '', //表单设计Key
        isFrame:'1',//是否为外链（0是 1否）
        path: '', //路由地址
        $routerPath: '', //前端路由地址（临时使用）
        $routerName: '', //前端路由名称（临时使用）
        $routerTitle: '' //菜单名称
      },
      formConf,
      //表单设计字段配置信息
      formBuildConfig: [],
      // 表单参数
      form: {},
    };
  },
  created() {
    /** 初始化 **/
    this.init();
  },
  methods: {
    /**
     * 初始化
     */
    init(){
      let tabGenId = this.$route.params.tabGenId
      if(this.strIsEmpty(tabGenId)){
        // this.msgError("菜单配置异常，未获取到表单设计KEY");
        if(this.$route.path === '/index'){
          //首页
          tabGenId = "Index"
        }else{
          return;
        }
      }
      //业务模块生成ID
      this.pageConfig.buildKey = tabGenId;
      this.pageConfig.tabGenId = this.pageConfig.buildKey;
      this.pageConfig.$routerPath = this.$router.currentRoute.path;
      this.pageConfig.$routerName = this.$router.currentRoute.name;
      this.pageConfig.$routerTitle = this.$route.meta.title;

      getFormBuildConfig(this.pageConfig.buildKey).then(res => {
        if (res.code == 200) {
          //表单设计字段配置信息
          this.formBuildConfig = res.data
        } else {
          this.msgError(res.msg)
        }
      })
    },
    /** 页面构建 */
    pageBuild() {
      this.$tab.openPage("[" + this.pageConfig['$routerTitle'] + "]页面构建", '/ysd/tool/PageGenerBuild/index/' + this.pageConfig['buildKey'], this.pageConfig);
    },
    /** 回到顶部 */
    scrollToTop(){
      this.$refs.appContainer.scrollTop = 0;
    }
  }
}
</script>

<style lang="scss" scoped>

  .app-container{
    //width: 100%;
    overflow: auto;
  }

  .title-box{
    background-color: white;
    color: #67C23A;
    font-size: 13px;
    line-height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    //bottom: 100px;
    top:20px;
    padding: 10px;
    border-radius: 4px;
    z-index: 2000;
    box-shadow: 0 0 6px rgba(0,0,0,.12);

      .item{
        margin:0;
      }

      .divider{
        margin: 10px 0;
      }

  }

</style>
